<!--表格组件-->
<template>
  <div class="box">
    <el-table
      style="width: 100%"
      ref="elTableRef"
      :data="tableData"
      :stripe="stripe"
      :highlight-current-row="highlightCurrentRow"
      @current-change="currentChange"
      @selection-change="handleSelectionChange"
    >
      <el-table-column v-if="selection" type="selection" width="55"></el-table-column>
      <el-table-column
        v-if="index"
        align="center"
        type="index"
        width="55"
        label="序号"
      ></el-table-column>
      <el-table-column
        :align="align || 'center'"
        show-overflow-tooltip
        v-for="item in tableHeader"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :fixed="item.fixed"
        :type="item.type"
        :sortable="item.sortable || false"
      >
        <!-- 插槽：预留功能 -->
        <template #default="scope" v-if="item.slot">
          <slot v-if="item.slot" :name="item.slot" :data="scope.row">></slot>
        </template>
        <template #default="scope" v-else>
          <span>{{ scope.row[item.prop] ? scope.row[item.prop] : "" }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="paginationBox">
      <el-pagination
        class="el-pagination"
        v-if="hasPagination"
        current-page="currentPage"
        page-size="pageSize"
        :page-sizes="pageSizes"
        :small="small"
        :background="true"
        :layout="layout"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  //是否显示序号
  index: {
    type: Boolean,
    default: true,
  },
  //是否多选
  selection: {
    type: Boolean,
    default: true,
  },
  // 表格数据
  tableData: {
    type: Array,
    default: [],
  },
  // 表头
  tableHeader: {
    type: Array,
    default: [],
  },
  // 是否为斑马纹
  stripe: {
    type: Boolean,
    default: true,
  },
  // 对齐方式
  align: {
    type: String,
    default: "center",
  },
  // 是否要高亮当前行
  highlightCurrentRow: {
    type: Boolean,
    default: true,
  },
  // 是否开启分页
  hasPagination: {
    type: Boolean,
    default: true,
  },
  total: {
    type: Number,
    default: 0,
  },
  currentPage: {
    type: Number,
    default: 1,
  },
  pageSize: {
    type: Number,
    default: 10,
  },
  pageSizes: {
    type: Array,
    default: [10, 20, 50, 100],
  },
  layout: {
    type: String,
    default: "total, sizes, prev, pager, next, jumper",
  },
  small: {
    type: Boolean,
    default: true,
  },
});

const emit = defineEmits([
  "rowClick",
  "selectChange",
  "changeTableData",
  "currentPage",
  "pageSize",
]);

// 表格点击当前行触发
const currentChange = (val) => {
  emit("currentChange", val);
};

// 当选择项发生变化时会触发该事件
const handleSelectionChange = (selection) => {
  emit("selectChange", selection);
};

// 每页条数变化的事件
const handleSizeChange = (val) => {
  emit("update:pageSize", val);
  emit("changeTableData", currentPage.value, val);
};
// 当前页码变化的事件
const handleCurrentChange = (val) => {
  emit("update:currentPage", val);
  emit("changeTableData", val, pageSize.value);
};
</script>

<style lang="scss" scoped>
.box {
  .paginationBox {
    width: 100%;
    margin-top: 20px;

    .el-pagination {
      justify-content: right;
    }
  }
}
</style>
